<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 引入编辑好的 css 文件-->
		<link rel="stylesheet" href="css/index.css"/>
	</head>
	<body>
		
		<!-- 顶部导航条方块 
			小技巧： div + TAB 自动补全
			
			HTML: 骨架
			CSS :骨架的样式： 宽度、高度、背景颜色等
		
		class="header" 代表将 css样式中名为 header 的样式
		作用在当前方块上面
		-->
		<div class="header">
			<!--元素中，添加一个居中的盒子-->
			<div class="w">
				
				<!-- 存储图片的盒子 logo -->
				<div class="logo">
					<div class="logo-img"></div>
				</div>
				
				
				<ul class="nav">
					<!--li 列表项  list item-->
					<li>游戏资料</li>
					<li>商城/合作</li>
					<li>用户互动</li>
					<li>赛事中心</li>
					<li>自助系统</li>
				</ul>
				
				
				<div class="box">
					<!-- 搜索框的图片 -->
					<div class="search"></div>
					
					<!-- 练习： 添加手机的图片 -->
					<div class="phone"></div>
				</div>
			
				<!-- 大盒子将 用户两块信息都包裹起来 -->
				<div class="user">
					<!-- 个人中心盒子： 
						包含 图片 和 文字性的东西
					-->
					<div class="user-info">
						
						<!-- 图片 盒子 -->
						<div class="me"></div>
						
						<!-- 文字的盒子-->
						<div class="text">
							<div class="top">
								亲爱的召唤师，欢迎
								
								<!-- a 链接标签
									href 跳转的位置
									
									# 当前页面跳转
								-->
								<a href="#"> 登录 </a>
							</div>
							
							<div class="bottom">
								登陆后可以看到自己的战绩
							</div>
						</div>
						
					</div>
					
					
					<!-- 个人中心 -->
					<div class="center">
						
						<div class="text">
							<div>
							登录并且绑定大区后才可查看您的具体信息哦~（包括战绩、资产、声望值等）
							</div>
							<div class="small-text">
官网个人信息显示略有延迟，请以游戏内数据为准
							</div>
						</div>
						
						<!--底部按钮-->
						<div class="btn">进入个人中心</div>
					</div>
				</div>	
				
			</div>
			
			
			
			<div class="down"></div>
			
		</div>
		
	</body>
</html>

<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/1.js" ></script>
